<template>
  <modal :visible="visible" position="center">
    <view class="eb-member-modal">
		<image @click="onClose" src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/member_close.png"
			class="top-close" mode="widthFix" />
			<image class="model-icon" src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/member_icon.png" mode="widthFix"></image>
      <view class="content">
        <view class="message"
          >查询到您授权的手机号尚未注册过会员，请重新授权或使用当前号码注册绑定。如需帮助，请联系客服。</view
        >
        <view class="checkbox-item" @click.stop="onChangeRuleCheck">
          <m-checkbox
            :value="ruleCheck"
            :size="32"
            :custom-style="{ marginTop: '6rpx' }"
          />
          <view class="checkbox-text">
            <view class="line">
              我已阅读并接受《<text
                class="font-black checkbox-text-link"
                @click.stop="onLinkClick"
              >THE MACALLAN SOCIETY 会员规则
              </text>》
            </view>
          </view>
        </view>
        <view class="btn-wrap">
          <button class="common-btn solid btn" @click.stop="onRegister">
            立即注册
          </button>
          <button
            v-if="ruleCheck"
            class="common-btn btn"
            open-type="getPhoneNumber"
            @getphonenumber="onGetPhoneNumber"
          >
            重新授权
          </button>
          <button v-else class="common-btn btn" @click.stop="onTip('重新授权')">
            重新授权
          </button>
        </view>
      </view>
      <!-- <view @click.stop="onClose" class="close macallan-icon mcl-close"></view> -->
    </view>
  </modal>
</template>

<script>
import modal from "../modal/modal.vue";
import mCheckbox from "../m-checkbox/m-checkbox.vue";
import { makeTheCallImg } from "./static.js";
import { navigateToMemberRule } from "./utils";
import tip from "@/utils/tip";
import registerController from "./RegisterController";
import RegisterTracker from "./RegisterTracker";

export default {
  name: "eb-member-modal",
  components: { modal, mCheckbox },
  props: {
    // 使用页面
    location: {
      type: String,
      default: "home",
    },
  },
  data() {
    return {	
      visible: false,
      imgSrc: makeTheCallImg,
      ruleCheck: false,
    };
  },
  methods: {
    open() {
      this.visible = true;
      RegisterTracker.joinVipResult({
        success: false,
        failReason:
          "查询到您授权的手机号尚未注册过会员，请重新授权手机号码进行绑定，或使用当前手机号码注册新会员，如需帮助，请联系客服。",
      });
      // this.$commonSensors.popupEvent('PopupExposure', {'popup_type' : '会员注册/绑定', 'popup_name': '注册失败弹窗'})
    },
    close() {
      this.visible = false;
    },
    onClose() {
      this.close();
      this.$emit("close");
    },
    onChangeRuleCheck() {
      this.ruleCheck = !this.ruleCheck;
    },
    onLinkClick() {
      navigateToMemberRule();
    },
    onTip(btnName) {
      RegisterTracker.authViprules({
        btnName: btnName,
        registerType: "NORMAL",
      });
      if (!this.ruleCheck) {
        tip.plainText("请确认您已阅读并同意会员规则");
        return false;
      }
      return true;
    },
    async onGetPhoneNumber(ev) {
      uni.showLoading({
        title: "正在加载",
      });
      RegisterTracker.authViprules({
        btnName: "重新授权",
        registerType: "NORMAL",
      });
      // 重新授权手机号
      const res = await registerController.getPhoneNumberData(ev, {
        location: this.location,
      });
      if (res.success) {
        this.close();
        const { phoneNumber } = res.data;
        const phoneNumberReg = /^1\d{10}$/;
        if(!phoneNumberReg.test(phoneNumber)){
          uni.hideLoading();
          this.$emit('recheckUser',{messageModalCode:'OVERSEAS_MEMBER'})
          return
        }
        const userCheckResult = await registerController.repeatUserCheck(
          phoneNumber
        );
        uni.hideLoading();
        this.$emit("recheckUser", {
          messageModalCode: userCheckResult.messageModalCode,
        });
      } else {
        uni.hideLoading();
      }

    },
    async onRegister() {
      if (this.onTip("立即注册")) {
        const res = await registerController.register();
        if (res.registerSuccess) {
          const userCheckResult = await registerController.repeatUserCheck();
          // 这里强制变更模板(接口只能查出绑定成功, 期望是入会成功)
          if (userCheckResult.messageModalCode === "SUCCESS_BIND") {
            userCheckResult.messageModalCode = "SUCCESS_JOIN";
          }
          Object.assign(res, userCheckResult);
          getApp().commonssPopupTrack('PopupExposure', {}, 'NORMAL', 'SUCCESS_JOIN')
          this.close();
          this.$emit("recheckUser", res);
        }
        if (res.joinMemberSuccess) {
          this.$emit("registerSuccess", res);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./common.scss";

.eb-member-modal {
  width: 654rpx;
  height:764rpx;
  background: #fff;
  position: relative;

  .top-img {
    display: block;
    width: 100%;
  }
  .top-close {
  	position: absolute;
  	right: 24rpx;
  	top: 24rpx;
  	width: 64rpx;
  	height: 64rpx;
  }
  .model-icon{
    width: 182rpx;
    height: 57rpx;
    padding-top: 128rpx;
	padding-left: 236.12rpx;
  }
  

  .content {
    padding-top: 10rpx;
    padding-bottom: 96rpx;
  }

  .message {
    font-size: 28rpx;
    line-height: 48rpx;
    padding: 0 64rpx;
	font-weight: 400;
	color: #757575;
	font-family:'NotoSansSC-Regular';
    text-align: center;
  }

  .checkbox-item {
    display: flex;
    margin-top: 80rpx;
    padding: 0 72rpx;
    box-sizing: border-box;
    width: 100%;

    .checkbox-text {
      margin-left: 16rpx;
      flex: 1;
      font-size: 24rpx;
      line-height: 40rpx;
    }
  }

  .btn-wrap {
    margin-top: 32rpx;
    padding: 0 64rpx;
    display: flex;
    justify-content: space-between;
  }

  .close {
    position: absolute;
    margin: 0;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    padding: 24rpx;
    font-size: 28rpx;
    color: #fff;
    line-height: 1;
  }
}
.line{
	color:#757575;
	font-family: 'FrankNew-Regular';
	width: 470rpx;
	font-size: 24rpx;
}
.font-black{
	color: #1a1a1a;
	font-family: 'FrankNew-Regular','NotoSansSC-Regular';
	// word-break: break-all;
}

// 宽屏间距调大
@media screen and (min-width: 390px) {
  .eb-member-modal {
    .line {
      // letter-spacing: 0.076rpx;
    }
	.message{
		  letter-spacing: 0.076rpx;
	}
  }
  
}
</style>
